﻿@{
    ViewBag.Title = "HoverEffect";
    Layout = "~/Views/Shared/_Page.cshtml";
}

<script src="/JsLib/G_JqEffect.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $.ajaxSetup({ cache: false });

        //table hover
        MyEffect.tableHover('#tbEmployee tr', 'active');

        //other hover
        MyEffect.hover('#wizard li', 'active')
    });
</script>

<h2>Hover Effect</h2>
<br />
<h3>Path: @ViewBag.Path</h3>
<br />
<h3>Extended JS: /JsLib/G_JqEffect.js</h3>
<br />
<h3>See the result on console</h3>
<br />

<table id="tbEmployee" class="normal_table" style="width: 60%;">
    <thead>
        <tr>
            <th>
                Id
            </th>
            <th>
                Name
            </th>
            <th>
                Age
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>David</td>
            <td>32</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Mary</td>
            <td>28</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Lucy</td>
            <td>25</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Peter</td>
            <td>50</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Andy</td>
            <td>30</td>
        </tr>
    </tbody>
</table>

<br />

<h3>UL</h3>
<ul id="wizard" style="width: 30%;">
    <li>
        <a href="#">Step 1 lorem ipsum</a>
    </li>
    <li>
        <a href="#">Step 2 lorem ipsum</a>
    </li>
    <li>
        <a href="#">Step 3 lorem ipsum</a>
    </li>
    <li>
        <a href="#">Step 4 lorem ipsum</a>
    </li>
    <li>
        <a href="#">Step 5 lorem ipsum</a>
    </li>
</ul>